<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.parent {
  width:300px;
  height:300px;
  padding:10px;
  border:1px solid red;
  margin:80px auto;
  position:relative;
}
a {
  width:100px;
  height:100px;
  line-height:100px;
  color:#fff;
  text-align:center;
  text-decoration:none;
  background-color:red;
  position:absolute;
  /* 如果写成.parent a{}，则.link3{}需要也改成a.link3{}，提高层级，否则link3显示红色 */
}
.link1 {
  top:10px;
  left:10px;
}
.link2 {
  top:10px;
  right:10px;
}
.link3 {
  top:110px;
  left:110px;
  color:yellow;
  background-color:blue;
}
.link4 {
  bottom:10px;
  left:10px;
}
.link5 {
  bottom:10px;
  right:10px;
}
</style>
</head>

<body>
<div class="parent">
  <a class="link1" href="#">链接1</a>
  <a class="link2" href="#">链接2</a>
  <a class="link3" href="#">链接3</a>
  <a class="link4" href="#">链接4</a>
  <a class="link5" href="#">链接5</a>
</div>
</body>
</html>
